﻿<%-- _lcid="1033" _version="14.0.4762" _dal="1" --%>
<%-- _LocalBinding --%>
<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=14.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document"  %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
	<SharePoint:ListItemProperty Property="BaseName" maxlength="40" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
	<WebPartPages:WebPartZone runat="server" title="loc:TitleBar" id="TitleBar" AllowLayoutChange="false" AllowPersonalization="false"><ZoneTemplate></ZoneTemplate></WebPartPages:WebPartZone>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleAreaClass" runat="server">
	<style type="text/css">
	Div.ms-titleareaframe {
	height: 100%;
	}
	.ms-pagetitleareaframe table {
	background: none;
	}
  </style>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
	<meta name="GENERATOR" content="Microsoft SharePoint" />
	<meta name="ProgId" content="SharePoint.WebPartPage.Document" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="CollaborationServer" content="SharePoint Team Web Site" />
	<script type="text/javascript">
// <![CDATA[
	var navBarHelpOverrideKey = "WSSEndUser";
// ]]>
	</script>
	<SharePoint:UIVersionedContent ID="WebPartPageHideQLStyles" UIVersion="4" runat="server">
		<ContentTemplate>
<style type="text/css">
body #s4-leftpanel {
	display:none;
}
.s4-ca {
	margin-left:0px;
}
.ms-cui-tabContainer, #s4-titlerow {
	
	display: none;
}
#s4-ribbonrow {
	height: 25px !important;
}
body #MSO_ContentTable {
	position:inherit;
}
</style>
		</ContentTemplate>
	</SharePoint:UIVersionedContent>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">
	<SharePoint:DelegateControl runat="server"
		ControlId="SmallSearchInputBox"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftActions" runat="server">
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">
	<SharePoint:ProjectProperty Property="Description" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderBodyRightMargin" runat="server">
	<div height="100%" class="ms-pagemargin"><img src="/_layouts/images/blank.gif" width="10" height="1" alt="" /></div>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderNavSpacer" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"></asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
	<!-- External libraries and plugins -->
    <script type="text/javascript" src="metrodynamis/libraries/jquery/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
    <!-- Metro Dynamis uses reset.css for the web -->
    <link rel="stylesheet" href="metrodynamis/libraries/reset/reset.css" />
    <!-- Metro Dynamis references -->
    <link rel="stylesheet" href="metrodynamis/md.core.css" />
    <script type="text/javascript" src="metrodynamis/md.core.js"></script>
    <script type="text/javascript" src="jwplayer/jwplayer.js"></script>
    <script type="text/javascript" src="http://www.youtube.com/player_api"></script>
    <script type="text/javascript" src="mediacentral.js"></script>
    
    <!-- Metro Dynamis Helpers -->
    <link rel="Stylesheet" href="light-theme/jquery-ui-1.8.20.custom.css" />
    <link rel="Stylesheet" href="mediacentral.css" />
<div class="md-body">
    <header class="md-header md-header-main">
        <h1>
            media central
        </h1>
    </header>
    <nav class="md-nav md-nav-horizontal md-nav-main">
        <ul>
            <li><a onclick="show('#browse')">browse</a></li>
            <li><a onclick="show('#find')">find</a></li>
            <li><a onclick="show('#manage')">manage</a></li>
            <li><a onclick="show('#add')">add</a></li>
        </ul>
    </nav>
    <div id="poweredby">
    	<img src="/MediaCentral/powered_by_cloudshare.png" alt="Powered by CloudShare" />
    </div>
    <div class="md-content">
        <div id="browse" class="md-container">
            <section>
                <article>
                    <!--<div id="playlistpanel">
                        <h3>
                            playlists
                        </h3>
                       <div id="playListItems">
                       </div>
                    </div>-->
                    <div id="topvideopanel">
                        <h3>
                            top videos
                        </h3>
                        <div id="browsetagsselected"></div>
                        <div id="allvideos">
                        </div>
                    </div>

                </article>
            </section>
        </div>
        <div id="find" class="md-container hidden">
        	<section>
        		<article>
        			<div id="findmain">
        				<h3>find videos</h3>
        				<div id="searchpanel">
        					<label for="searchbox">Type the name of a video:</label>
        					<input type="text" id="searchbox" />
        					<div id="searchresults">
        					</div>
        				</div>
        			</div>
        		</article>
        	</section>
        </div>
        <div id="add" class="md-container hidden">
            <section>
                <article>
                    <div id="add-video-panel">
                        <h3>
                            upload video
                        </h3>
                        <div id="upload-vid">
                            <div id="add-local-vid">
                            	<!--<iframe scrolling="no" src="/_layouts/Upload.aspx?List=%7B5B2FE2D6%2D755F%2D4F4F%2DAD51%2D69A703A9D8FB%7D&RootFolder=%2FLocalVideos&IsDlg=1"></iframe>-->
                            	<input type="button" id="uploadLocalVidbutton" value="Click here to upload a new video from your hard drive" />
                            	
                            </div>
                        </div>
                        <h3>
                           add video from YouTube
                        </h3>
                        <div id="add-vid-youtube">
							<div id="add-yt-getdetails">
								<label for="ytlinkbox">Enter link to YouTube Video:</label>
								<input type="text" id="ytlinkbox">
								<input type="button" id="ytlinkgobutton" value="Get Details" />
							</div>
							<div id="add-yt-editdetails">
								<p>Edit the following details for this video if you wish:</p>
								<label for="ytvidtitle">Title: </label>
								<input type="text" id="ytvidtitle" /><br />
								<label for="ytviddescription">Description: </label>
								<input type="text" id="ytviddescription" /><br />
								<label for="ytvidthumb">Thumbnail location: </label>
								<input type="text" id="ytvidthumb"/><br />
								<label for="ytvidtags">Tags: </label>
								<input type="text" id="ytvidtags"/><br />
								
								<input type="button" value="Save this video!" id="ytsavevid" />
							</div>                            
                        </div>
                        <!--<h3>
                           add playlist from YouTube
                        </h3>
                        <div id="add-playlist-youtube">
                            <div id="add-ytplaylist-getdetails">
	                            <label for="ytlinkbox">Enter link to YouTube PlayList:</label>
								<input type="text" id="ytpllinkbox">
								<input type="button" id="ytpllinkgobutton" value="Get Details" />
                            </div>
                            <div id="add-ytplaylist-editdetails">
                            	<label for="ytpltitle">Title: </label>
								<input type="text" id="ytpltitle" /><br />
								<label for="ytviddescription">Description: </label>
								<input type="text" id="ytpldescription" /><br />
								<label for="ytplthumb">Thumbnail location: </label>
								<input type="text" id="ytplthumb"/><br />
								<select id="ytplaylistvids" multiple="multiple">
								</select><br />
								<input type="button" value="Save this playlist!" id="ytsavepl" />
                            </div>
                        </div>-->
                    </div>
                </article>
            </section>
        </div>
        <div id="manage" class="md-container hidden">
            <section>
                <article>
                    <div id="manage-video-panel">
                        <h3>
                           edit/delete video
                        </h3>
                        <div id="manage-vids">
	                       <!-- <div id="edit-vids-yt">
	                        	<div id="left-col">
		                        	<select id="edit-vid-list" multiple="multiple">
		                        	</select>          
	                        	</div>
	                        	<div id="right-col">
	                        		<label for="titleTextbox">Title: </label>
	                        		<input type="text" id="titleTextbox" /><br />
	                        		<label for="descTextbox">Description: </label>
	                        		<input type="text" id="descTextbox" /><br />
	                        		<label for="thumbTextbox">Thumbnail: </label>
	                        		<input type="text" id="thumbTextbox" /><br />
	                        		<label for="tagsTextbox">Tags: </label>
	                        		<input type="text" id="tagsTextbox" /><br />
	                        		

	                        		<input type="hidden" id="editvideoid" />
	                        		<input type="hidden" id="localVid" />
	                        		<input type="button" value="Save Changes" id="saveYTChanges" />
	                        		<input type="button" value="Delete Video" id="deleteYTVideo" />
	                        	</div>                     
	                        </div>-->
	                        <div id="edit-vids-local">
	                        	<div id="left-col">
	                        		<select id="edit-local-vid-list" multiple="multiple" size="13">
	                        		</select>
	                        	</div>
	                        	<div id="right-col">
	                        		<label for="titleTextboxLocalVid">Title: </label>
	                        		<input type="text" id="titleTextboxLocalVid" /><br />
	                        		<label for="descTextboxLocalVid">Description: </label>
	                        		<input type="text" id="descTextboxLocalVid" /><br />
	                        		<label for="thumbTextboxLocalVid">Thumbnail: </label>
	                        		<input type="text" id="thumbTextboxLocalVid" /><br />
	                        		<label for="tagsTextboxLocalVid">Tags: </label>
	                        		<input type="text" id="tagsTextBoxLocalVid" /><br />
	                        		
	                        		<input type="hidden" id="editlocalvideoid" />
	                        		<input type="hidden" id="localVid" />
	                        		<input type="button" value="Save Changes" id="saveLocalVidChanges" />
	                        		<input type="button" value="Delete Video" id="deleteLocalVid" />
	                        	</div>
	                        </div>
		                </div>
                    </div>
                </article>
            </section>
        </div>
    </div>
    <script type="text/javascript">
        function show(id) {
            $('.md-container').hide();
            $(id).fadeIn();
            MD.UI.recalculateAll(); // Refresh all viewports
            
            if (id == "#manage") {
            	var manager = new MediaCentral.Manager();
            	manager.PopulateEditBoxes();
				MediaCentral.Manager.WireEditControls();
            } else if (id == "#browse") {
            	MediaCentral.Browse.PopulateAllVideos();
            } else if (id == "#add") {
            	MediaCentral.LocalVideos.WireHandlers();
            } else if (id == "#find") {
            	MediaCentral.Find.WireHandlers();
            }
        }
        $(document).ready(function () {
            $('#manage-video-panel').accordion();
            $('#add-video-panel').accordion();
        });
    </script>

</div>

</asp:Content>
